<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>员工管理系统</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
        .warn{
            color: red;
            display: block;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app" class="col-5">
        <add-person :people="people"></add-person>
        <search-person @search="doSearch" :keyword='keyWord'></search-person>
        <list-people :people="searchPeople" @delperson="doDel"></list-people>
    </div>
    <template id="add-person">
        <fieldset>
            <legend>商品详情</legend>
            <p>
                <label for="name">姓名:</label>
                <input class="form-control" type="text" name="name" id="name" v-model='person.name'>
                <span v-bind:class="[{warn:!validName},{hide:validName}]">姓名不能为空</span>
            </p>
            <p>
                <label for="age">年龄:</label>
                <input class="form-control" type="text" name="age" id="age" v-model='person.age'>
                <span v-bind:class="[{warn:!validAge},{hide:validAge}]">年龄不能为空</span>
            </p>
            <p>
                <label for="price">性别:</label>
                <select class="form-control" id="sendSybol" v-model="person.sex">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </p>
            <p><input class="form-control btn btn-primary" type="button" value="保存" @click='add()' :disabled="!(validName&&validAge)"></p>
        </fieldset>
    </template>
    <template id="search-person">
        <input class="form-control" type="text" placeholder="请输入搜索关键字" v-model='keyword' @keyup="doSearch">
    </template>
    <template id="list-people">
        <table class="table">
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>操作</th>
            </tr>
            <tbody v-for="(person,index) in people">
                <tr>
                    <td>{{ person.name }}</td>
                    <td>{{ person.age }}</td>
                    <td>{{ person.sex }}</td>
                    <td><input class="form-control btn btn-danger" type="button" value="删除" @click='del(index)'/></td>
                </tr>
            </tbody>
        </table>
    </template>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
    var vm = new Vue({
        el:"#app",
        data: {
            people: [{ name: '张三', age: 30, sex: '男' },
            { name: '李四', age: 26, sex: '男' },
            { name: '王五', age: 22, sex: '女' },
            { name: '赵六', age: 36, sex: '男' }
            ],
            keyWord: ""
        },
        methods: {
          doDel:function(index){
              if(window.confirm("确定要删除么"))
                this.people.splice(index,1)
          },
          doSearch:function(k){
              console.log(k)
              this.keyWord = k
          } 
        },
        computed: {
            // 计算属性
            searchPeople: function () {
                var that = this;
                return this.people.filter(function (item) {
                    return item.name.indexOf(that.keyWord) != -1;
                });
            }
        },
        components: {
            "add-person":{
                data () {
                    return {
                        person:{
                            name:'',
                            age:'',
                            sex:'男'
                        },
                        validName:false,
                        validAge:false
                    }
                },
                template:"#add-person",
                props: ["people"],
                methods: {
                    add:function(){
                        this.people.push(this.person)
                    }
                },
                watch: {
                    "person.name":function(k,v){
                        this.validName = (k != '')
                    },
                    "person.age":function(k,v){
                        this.validAge = (k != "")
                    }
                }
            },
            "search-person": {
                template: "#search-person",
                props: ["keyword"],
                methods: {
                    doSearch: function () {
                        this.$emit("search", this.keyword)
                    }
                }
            },
            "list-people":{
                template:"#list-people",
                props: ["people"],
                methods: {
                    del:function(index){
                        this.$emit("delperson", index)
                    }
                }
            }
        }
        
    })
    </script>
</body>
</html>